@unitSize: 4px;

// Fonts
@fontName:  -apple-system, system-ui, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Ubuntu",
            "Helvetica Neue", sans-serif;

@fontSize: @unitSize * 4;


// Colors
@lightenValue: 10%;
@darkenValue: 10%;

@transparent:			transparent;

@black:                #000000;
@white:                #ffffff;
@dark:                 #1d1d1d;
@light:                #f8f8f8;

@gray:                 #ccc;
@gray-blue:            #6a89a7;
@gray-white:           #f5f5f5;
@gray-mouse:           #566b75;

@lime:                 #AEFD6C;
@green: #00b500;
@emerald:              #50c878;
@blue:                 #5e87ff;
@teal: #1ac5c5;
@cyan:                 #94b6ff;
@cobalt:               #0047ab;
@indigo: #6400a8;
@almost: #6a2ded;
@violet:               #ee82ee;
@pink:                 #ffc0cb;
@magenta:              #ff00ff;
@crimson:               #df0e38;
@red:                  #ff0000;
@clown: #ff6d66;
@orange:               #ffa500;
@amber:                #ffca2a;
@yellow: #ffe95e;
@brown: #ca773c;
@olive: #a1a100;
@steel: #7b91a6;
@mauve:                #e0afff;
@taupe: #977e67;
@champagne:            #f7e6ca;
@khaki:                #d5c58a;
@charcoal: #989898;
@bronze: #e48d3e;
@windstorm: #799ed6;
@nude:                 #f7d9bc;
@terracotta:           #e35336;
@coral:                #ff8559;
@army:                 #5d6532;
@seashell:             #fff1e7;
@sand: #f1e0ae;

@light-lime:           #f2ffe7;
@light-green:          #e7f6e6;
@light-emerald: #d1e6cc;
@light-blue:           #e7eaff;
@light-teal:           #e1f2f3;
@light-cyan:           #e3edff;
@light-cobalt: #d1ecff;
@light-indigo: #f3dcf3;
@light-almost: #eee5ff;
@light-violet:         #fce2fb;
@light-pink:           #ffeef1;
@light-magenta:        #ffe2ff;
@light-crimson: #ffd1da;
@light-red: #ffe1e1;
@light-clown: #ffdede;
@light-orange:         #fff3de;
@light-amber:          #fff8e1;
@light-yellow:         #ffffc6;
@light-brown:          #ffeed9;
@light-olive:          #f8fde7;
@light-steel:          #edeeee;
@light-mauve:          #f7ecfe;
@light-taupe: #eadccf;
@light-champagne: #fff9f2;
@light-khaki: #f6f1dd;
@light-charcoal:       #e8e8e8;
@light-bronze: #ffecdc;
@light-windstorm:      #e6ebf5;
@light-nude:           #fcf0e4;
@light-terracotta: #ffe5df;
@light-coral:          #ffd8c8;
@light-army:           #eceacb;
@light-seashell:       #fff9f8;
@light-sand:           #f8f3e0;
@light-gray:           #f4f4f4;
@light-gray-blue:      #bee2f4;
@light-gray-mouse:     #8ab4c8;

@sat-lime: #7dba4a;
@sat-green: #008f00;
@sat-emerald: #3ca15d;
@sat-blue: #1f43ae;
@sat-teal: #008a8a;
@sat-cyan: #659db6;
@sat-cobalt: #003391;
@sat-indigo: #430080;
@sat-almost: #4e18c1;
@sat-violet: #b65fb6;
@sat-pink: #cc7296;
@sat-magenta: #c500c5;
@sat-crimson: #980824;
@sat-red: #b80000;
@sat-clown: #d64f48;
@sat-orange: #bc7700;
@sat-amber: #d19b00;
@sat-yellow: #e4ce43;
@sat-brown: #884b20;
@sat-olive: #838300;
@sat-steel: #5c7081;
@sat-mauve: #a982c1;
@sat-taupe: #5e4a3c;
@sat-champagne: #ccbca5;
@sat-khaki: #aa9c6b;
@sat-charcoal: #5e5e5e;
@sat-bronze: #aa621f;
@sat-windstorm: #5071a3;
@sat-nude: #baa28b;
@sat-terracotta: #af3a23;
@sat-coral: #b65c39;
@sat-army: #647030;
@sat-seashell: #e1cbbd;
@sat-sand: #d1c5a1;
@sat-gray: #9c9c9c;
@sat-gray-blue: #5f7a88;
@sat-gray-mouse: #3f535c;

@dark-lime:            #557f32;
@dark-green:           #003d00;
@dark-emerald:         #246339;
@dark-blue:            #132a6f;
@dark-teal:            #014848;
@dark-cyan:            #456c7e;
@dark-cobalt:          #001f54;
@dark-indigo:          #21003e;
@dark-almost: #2f0687;
@dark-violet:          #773e77;
@dark-pink:            #805f65;
@dark-magenta:         #800080;
@dark-crimson:         #6e0519;
@dark-red:             #800000;
@dark-clown: #aa2824;
@dark-orange:          #805100;
@dark-amber:           #805e00;
@dark-yellow: #bca826;
@dark-brown:           #42240f;
@dark-olive:           #3d3d00;
@dark-steel:           #2e3841;
@dark-mauve:           #705680;
@dark-taupe:           #261e18;
@dark-champagne:       #7c7364;
@dark-khaki:           #6a6142;
@dark-charcoal:        #202020;
@dark-bronze:          #693c13;
@dark-windstorm:       #304462;
@dark-nude:            #7c6c5d;
@dark-terracotta:      #712516;
@dark-coral:           #804028;
@dark-army:            #2a2f14;
@dark-seashell: #bfa89a;
@dark-sand: #8f8975;
@dark-gray: #515151;
@dark-gray-blue:       #36464e;
@dark-gray-mouse: #2e3c42;


@colors:       black, white, dark, light, gray, gray-blue, gray-white, gray-mouse,

               lime, green, emerald, blue, teal, cyan, cobalt, indigo, almost, violet, pink, magenta, crimson, red, clown, orange,
               amber, yellow, brown, olive, steel, mauve, taupe, champagne, khaki, charcoal,
               bronze, windstorm, nude, terracotta, coral, army, seashell, sand,

               light-lime, light-green, light-emerald, light-blue, light-teal, light-cyan, light-cobalt, light-indigo, light-almost,
               light-violet, light-pink, light-magenta, light-crimson, light-red, light-clown, light-orange, light-amber,
               light-yellow, light-brown, light-olive, light-steel, light-mauve, light-taupe, light-gray, light-gray-blue,
               light-gray-mouse, light-champagne, light-khaki, light-charcoal, light-bronze, light-windstorm, light-nude,
               light-terracotta, light-coral, light-army, light-seashell, light-sand,

               dark-lime, dark-green, dark-emerald, dark-blue, dark-teal, dark-cyan, dark-cobalt, dark-indigo, dark-almost, dark-violet,
               dark-pink, dark-magenta, dark-crimson, dark-red, dark-clown, dark-orange, dark-amber, dark-yellow, dark-brown, dark-olive,
               dark-steel, dark-mauve, dark-taupe, dark-gray, dark-gray-blue, dark-gray-mouse, dark-champagne, dark-khaki,
               dark-charcoal, dark-bronze, dark-windstorm, dark-nude, dark-terracotta, dark-coral, dark-army, dark-seashell, dark-sand,

                sat-lime, sat-green, sat-emerald, sat-blue, sat-teal, sat-cyan, sat-cobalt, sat-indigo, sat-almost, sat-violet,
                sat-pink, sat-magenta, sat-crimson, sat-red, sat-clown, sat-orange, sat-amber, sat-yellow, sat-brown, sat-olive,
                sat-steel, sat-mauve, sat-taupe, sat-gray, sat-gray-blue, sat-gray-mouse, sat-champagne, sat-khaki,
                sat-charcoal, sat-bronze, sat-windstorm, sat-nude, sat-terracotta, sat-coral, sat-army, sat-seashell, sat-sand;

@simpleColors: black, white, dark, light, gray, gray-blue, gray-white, gray-mouse;

@normalColors: lime, green, emerald, blue, teal, cyan, cobalt, indigo, almost, violet, pink, magenta, crimson, red, orange,
               amber, yellow, brown, olive, steel, mauve, taupe, champagne, khaki, charcoal,
               bronze, windstorm, nude, terracotta, coral, army, seashell, sand;

@lightColors:  light-lime, light-green, light-emerald, light-blue, light-teal, light-cyan, light-cobalt, light-indigo, light-almost,
               light-violet, light-pink, light-magenta, light-crimson, light-red, light-orange, light-amber,
               light-yellow, light-brown, light-olive, light-steel, light-mauve, light-taupe, light-gray, light-gray-blue,
               light-gray-mouse, light-champagne, light-khaki, light-charcoal, light-bronze, light-windstorm, light-nude,
               light-terracotta, light-coral, light-army, light-seashell, light-sand;

@darkColors:  dark-lime, dark-green, dark-emerald, dark-blue, dark-teal, dark-cyan, dark-cobalt, dark-indigo, dark-almost, dark-violet,
              dark-pink, dark-magenta, dark-crimson, dark-red, dark-orange, dark-amber, dark-yellow, dark-brown, dark-olive,
              dark-steel, dark-mauve, dark-taupe, dark-gray, dark-gray-blue, dark-gray-mouse, dark-champagne, dark-khaki,
              dark-charcoal, dark-bronze, dark-windstorm, dark-nude, dark-terracotta, dark-coral, dark-army, dark-seashell, dark-sand;

@satColors:  sat-lime, sat-green, sat-emerald, sat-blue, sat-teal, sat-cyan, sat-cobalt, sat-indigo, sat-almost, sat-violet,
              sat-pink, sat-magenta, sat-crimson, sat-red, sat-orange, sat-amber, sat-yellow, sat-brown, sat-olive,
              sat-steel, sat-mauve, sat-taupe, sat-gray, sat-gray-blue, sat-gray-mouse, sat-champagne, sat-khaki,
              sat-charcoal, sat-bronze, sat-windstorm, sat-nude, sat-terracotta, sat-coral, sat-army, sat-seashell, sat-sand;


// Body
@bodyColor: lighten(@black, 13%);

// Hover
@hoverBackground:  rgba(red(@dark), green(@dark), blue(@dark), .1);
@hoverBackground2:  rgba(red(@dark), green(@dark), blue(@dark), .5);
@hoverBackgroundLight3:  rgba(red(@white), green(@white), blue(@white), .3);
@hoverBackgroundLight2:  rgba(red(@white), green(@white), blue(@white), .2);
@hoverBackgroundLight1:  rgba(red(@white), green(@white), blue(@white), .1);
@hoverBackgroundLight:  rgba(red(@white), green(@white), blue(@white), .01);

// Appbar
//@appBarBackground: @brandColor2;
//@appBarBackgroundActive: lighten(@brandColor2, 10%);
//@appBarColor: @white;

// Taskbar
@taskBarBackground: #053046;
@taskBarItemHover: rgba(red(@white), green(@white), blue(@white), .1);
@taskBarItemActive: rgba(red(@white), green(@white), blue(@white), .3);

// Form and Inputs
@inputBorder: #d9d9d9;
@checkBackground: darken(@inputBorder, 10%);

// Disabled
@disabledBackground: #e9e9e9;
@disabledBorder: #e9e9e9;
@disabledColor: lighten(@dark, 50%);

// Borders
@borderRadius: .25rem;
@borderColor: darken(@light, 10%);

// Links
@linkColor:             #0366d6;
@linkColorHover:        #0056b3;


// Accent colors-css
@primaryColor: #f75553;
@primaryColorLight: lighten(#f75553, 15%);
@primaryColorDark: darken(#f75553, 5%);

@secondaryColor: #74290a;
@secondaryColorLight: lighten(#74290a, 15%);
@secondaryColorDark: darken(#74290a, 5%);

@tertiaryColor: #ffbebd;
@tertiaryColorLight: lighten(#fdd7d6, 15%);
@tertiaryColorDark: darken(#fdd7d6, 5%);

@successColor: @emerald;
@successColorLight: lighten(@emerald, 15%);
@successColorDark: darken(@emerald, 5%);

@alertColor: @crimson;
@alertColorLight: lighten(@crimson, 15%);
@alertColorDark: darken(@crimson, 5%);

@warningColor: @orange;
@warningColorLight: lighten(@orange, 15%);
@warningColorDark: darken(@orange, 5%);

@yellowColor: @yellow;
@yellowColorLight: lighten(@yellow, 15%);
@yellowColorDark: darken(@yellow, 5%);

@infoColor: #468cff;
@infoColorLight: lighten(#468cff, 15%);
@infoColorDark: darken(#468cff, 5%);

@darkColor: lighten(@dark, 20%);
@darkColorLight: lighten(@darkColor, 15%);
@darkColorDark: darken(@darkColor, 5%);

@lightColor: @light;
@lightColorLight: @white;
@lightColorDark: darken(@light, 5%);

@accentColors: primary, secondary, tertiary, success, alert, warning, info, dark, light;
@buttonPredefinedTypes: primary, secondary, tertiary, success, alert, warning, info, dark, light;
@buttonPredefinedTypesLength: length(@buttonPredefinedTypes);

// Selected element
@selectedElementBorder: @light-cyan;

// Z-index
@zindex-selectedCheck:      100;
@zindex-absolute:           500;
@zindex-dropdown:           1000;
@zindex-sticky:             1020;
@zindex-fixed:              1030;
@zindex-modal-backdrop:     1040;
@zindex-modal:              1050;
@zindex-popover:            1060;
@zindex-tooltip:            1070;
@zindex-top:                1080;
@zindex-notify:             1085;
@zindex-charms:             1090;
@zindex-overlay:            2000;
@zindex-fullscreen:         2147483647;


// Percents breakpoints
@percentBreakpointsList: 25, 50, 75, 100;
@percentBreakpointsLength: length(@percentBreakpointsList);

// Tiles
@tileApp: 44px 44px;
@tileSmall: 70px 70px;
@tileMedium: 150px 150px;
@tileWide: 310px 150px;
@tileLarge: 310px 310px;
@tileMargin: 5px;
@tileCellSize: extract(@tileMedium, 1);
@tileOutlineColor:  rgba(red(@dark), green(@dark), blue(@dark), .1);
@tileTransformPerspective: 500px;
@tileTransformRotate: 0.138372rad;
@tileSize: extract(@tileMedium, 1);


// Media breakpoints
@fs: 0;
@xs: 360px;
@sm: 576px;
@ld: 640px;
@md: 768px;
@lg: 992px;
@xl: 1200px;
@xxl: 1400px;
@xxxl: 2000px;

@media-rules: {
    fs: @fs;
    xs: @xs;
    sm: @sm;
    ld: @ld;
    md: @md;
    lg: @lg;
    xl: @xl;
    xxl: @xxl;
    xxxl: @xxxl;
}
@media-rules-max: {
    xs: 359px;
    sm: 575px;
    ld: 639px;
    md: 767px;
    lg: 991px;
    xl: 1199px;
    xxl: 1399px;
    xxxl: 1999px;
}

@media-scale: {
    fs: 0.8;
    xs: 1.1;
    sm: 1.2;
    ld: 1.3;
    md: 1.4;
    lg: 1.5;
    xl: 1.6;
    xxl: 1.7;
    xxxl: 1.8;
}

@mediaBreakpointListMobile: fs, xs, sm, ld, md, lg, xl, xxl, xxxl;
@mediaBreakpointListMobileLength: length(@mediaBreakpointListMobile);

@percents: 10, 20, 25, 33, 50, 66, 75, 80, 90, 100;
@percentsLength: length(@percents);

// Transition
@transition-speed:       .3s;
@transition-short:       all .15s ease-in-out;
@transition-base:        all .3s ease-in-out;
@transition-long:        all 1s ease-in-out;
@transition-margin:      margin .3s ease-in-out;
@transition-fade:        opacity .15s linear;
@transition-color:       color .3s linear;
@transition-collapse:    max-height .3s ease;
@transition-width:       width .3s ease;
@transition-left:        left .3s ease;
@transition-right:       right .3s ease;
@transition-top:         top .3s ease;
@transition-bottom:      bottom .3s ease;
@transition-transform:   transform .3s ease;

// Grid
@gridCellBaseSize: 8.333335%;

// Windows
@winBorderSize:                         .5rem;
@winBorderColor:                        #6badf6;
@winBorderColorInactive:                #ebebeb;
@winDialogContentBackground:            #ededed;
@winFlatBackgroundColor:                #ffffff;
@winFlatBorderColor:                    #e9e9e9;
@winFlatSystemButtonHoverBackground:    #cde6f7;
@winFlatSystemButtonActiveBackground:   #92c0e0;
@winFlatSystemButtonActiveColor:        #2a8dd4;
@winFlatSystemButtonRestColor:          #777777;
@winCloseButtonColor:                   #c75050;
@winCloseButtonActiveColor:             #e04343;
@winCloseButtonInActiveColor:           #bcbcbc;
@winCaptionBackground:                  #3c6478;
@winCaptionColor:                       @white;

@streamerItemWidth: 224px;
@streamerTimelineImage: "";

@activityRingTime: 4000ms;
@activityRingSize: 32px;
@activityColor: @white;
@activityColorDark: @dark-gray;
@activityRingRotate: -14deg;
@activityRingTimeMute: 30;

@hintBackground: rgba(255, 252, 192, 1);
@hintColor: @dark;

@mpStep: 4;
@mpUnit: px;

@playerInactiveColor: #555555;
@playerActiveColor: @green;
@playerHoverColor: @white;
@playerControlsBackground: rgba(34, 34, 34, 0.5);

@ribbonMenuStaticBackground: #1979ca;
@ribbonMenuBackground: #ffffff;
@ribbonMenuActiveBackground: #f5f6f7;
@ribbonMenuBorder: #dadbdc;
@ribbonMenuItemBorder: #a4cef9;
@ribbonMenuItemActiveBorder: #1979ca;
@ribbonMenuItemHoverBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .2);
@ribbonMenuItemActiveBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .8);
@ribbonDropdownBackground: #fbfcfd;
@ribbonDropdownDivider: #dcddde;
@ribbonDropdownShadow: #e3e4e5;

@inputHeight: 36px;

@input-lx: 50px;
@input-sx: 28px;

@badgeFontSize: 12px;

@johnDoe: "";

// animation
@defaultPerspective: 600px;
@defaultAnimationSpeed: .3s;

// additional; colors-css
@ribbedSize: 20px;
@ribbedAlpha: .15;
@ribbedAngle: -45deg;
@alpha: .5;
